<template>
	<view id="feedback">
		<view class="title">
			<text>问题和意见 </text>
			<uni-data-select
				style="width:200rpx;position:absolute;right:10rpx;font-size:24rpx;"
				v-model="feedBackIndex"
				:localdata="feedBackList"
				:clear="false"
			></uni-data-select>
		</view>
		<textarea v-model='feedBack' class="feedBack" placeholder="请详细描述你的问题和意见..." maxlength="100"></textarea>
		<view class="opinionPic">
			<view class="picBox" v-if="picList.length > 0">
				<image :src="item" mode="" v-for="(item,index) in picList" :key="index" />
			</view>
			<image src="../../static/my/upload.png" mode="" @click="addPic" />
		</view>
		<view class="sureBtn"  @click='feedSubmit()'>提交</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				typeName:'',
				feedBack:'',
				picList:[],
				feedBackList: [
					{ value: 1, text: "建议" },
					{ value: 0, text: "投诉" },
					{ value: 2, text: "问题反馈" },
				],
				feedBackIndex:1
			}
		},
		onLoad(option){
			
		},
		methods: {
			addPic(){
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: 'compressed',
					success: (chooseImageRes) => {
						let imgPath = chooseImageRes.tempFilePaths[0]
						this.httpClient.upload('agents/app/oaFeedback/upload',{
							name: 'file',
							filePath: imgPath
						}).then(res=>{
							if(res.code==200){
								this.picList.push(res.data.url)
							}
						})
					}
				})
			},
			feedSubmit() {
				// console.info(this.feedBackIndex)
				// console.info(this.feedBackList[this.feedBackIndex].txt)
				// return
				if(!this.feedBack){
					uni.showToast({
						icon: 'success',
						title: '请填写反馈内容'
					})
					return
				}
				this.httpClient.post('agents/app/oaFeedback/addForApp',{
					type: this.feedBackIndex,
					content: this.feedBack, 
					enclosure: this.picList.join(',')
				}).then(res=>{
					if(res.code==200){
						uni.showToast({
							icon: 'success',
							title: res.msg
						})
						setTimeout(function() {
							uni.navigateBack({
								delta:1
							})
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	#feedback{
		background-color: #FFF;
		 .title{
		   color: #8f8f94;
		   background: #FFF;
		   font-size: 0.85rem;
		   height: 3rem;
		   padding: 0 1rem;
		   display: flex;
		   align-items: center;
		   justify-content: space-between;
		   border-bottom:10rpx solid #EEE;
		 }
		  .name{
		     display: flex;
		     align-items: center;
		   }
		  .name i{
		     color: #999;
		     margin-left: 0.3rem;
		   }
		  #popover-demo-content{
		     background: #fff;
		     color: #333;
		     overflow: hidden;
		     border: 1px solid #eee;
		     border-radius: 3px
		   }
		   #popover-demo-content .list{
		     height: 2.5rem;
		     width: 4rem;
		     overflow: hidden;
		     line-height: 2.5rem;
		     padding: 0 1.5rem;
		     font-size: 0.75rem;
		     border-bottom: 1px solid #eee;
		     text-align: center;
		   }
		 #view{
		   background: #fff;
		 }
		 .feedBack{
		   width: 100%;
		   height: 8rem;
		   padding: 0.85rem 1rem; 
		   outline: none;
		   box-sizing: border-box;
		 }
		 .opinionPic{
				padding: 0 1rem;
		  }
			.opinionPic	.picBox{
				display: inline-block;
			}
			.opinionPic	image{
					width: 6.2rem;
					height: 6.2rem;
					margin-right: 0.6rem;
				}
			
		 .sureBtn{
		    background: #3aacff;
		    text-align: center;
		    color: #fff;
		    line-height: 2.5rem;
		    border-radius: 0.5rem;
			margin:30rpx;
		  }
	}
	
</style>
